
function creatDiv() {
    let oDiv = document.createElement('div');
    let numTotal = parseInt(Math.random() * 10);
    for (let i = 0; i < numYZSpan[numTotal][2]; i++) {
        let oSpan = document.createElement('span');
        oSpan.innerHTML = `${parseInt(Math.random()*10)}`;
        oDiv.appendChild(oSpan);
    }
    let numX = parseInt(Math.random() * screenWidth / 100) * 100;
    let numY = numYZSpan[numTotal][0];
    let numZ = numYZSpan[numTotal][1];
    oDiv.style.transform = `translate3d(${numX}px, ${numY}px, ${numZ}px)`;
    $('#rain')[0].appendChild(oDiv);
    let i = 0;
    let time = setInterval(() => {
    if (i > $(oDiv).children().length) {
        oDiv.style.opacity=0;
        setTimeout(function () {
            $(oDiv).remove();
        },500);
        clearInterval(time);
    }
    $($(oDiv).children()[i]).fadeIn(0, function() {
        // let r=parseInt(Math.random()*255);
        this.style.color = `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)}`;
        this.style.opacity = 0;
        this.style.display='block'
    });
    i++;
    // 控制雨的速度
}, 50);
    // $(oDiv).children().fadeIn(0,function() {
    //     this.style.color = "green";
    //     this.style.opacity = 1;})
    console.log($(oDiv).children())
}
creatDiv();
setInterval(function () {
    creatDiv();
    //控制雨的密度
},20);

// for (let i = 0; i < 150; i++) {
//     let oDiv = document.createElement('div');
//     let numTotal = parseInt(Math.random() * 10);
//     for (let i = 0; i < numYZSpan[numTotal][2]; i++) {
//         let oSpan = document.createElement('span');
//         oSpan.innerHTML = `${parseInt(Math.random()*10)}`;
//         oDiv.appendChild(oSpan);
//     }
//     let numX = parseInt(Math.random() * screenWidth / 100) * 100;
//     let numY = numYZSpan[numTotal][0];
//     let numZ = numYZSpan[numTotal][1];
//     oDiv.style.transform = `translate3d(${numX}px, ${numY}px, ${numZ}px)`;
//     $('#rain')[0].appendChild(oDiv);
// }
//     function autoRain(){
//
// }

// let i = 0;
// let time = setInterval(() => {
//     if (i > $('span').length) {
//         clearInterval(time);
//     }
//     $($('#rain>div')).fadeIn(0, function() {
//         this.style.color = "green";
//         this.style.opacity = 1;
//     });
//     i++;
// }, 100);

// for(let i=0;i<$('span').length;i++){
//     setTimeout(function(){
//         $($('span')[i]).fadeIn(3000,function () {setTimeout(function () {console.log(i);
//         },2000)
//         });

//     },1000)
// }

// span.
// console.log($($('span')[0]).fadeIn(3000));